﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <ul id="ul_bind">

    </ul>
    <script src="../../Content/js/jquery-1.8.2.min.js"></script>
    <script src="../../Content/js/mustache.min.js"></script>
    <script id="j_template" type="x-tmpl-mustache">
        {{#beatles}}
        <li>* {{name}} {{firstName}}</li> 
        {{/beatles}}
    </script>
    <script type="text/javascript">
        var objInvokeResult = {
            "beatles": [
              { "firstName": "John", "lastName": "Lennon" },
              { "firstName": "Paul", "lastName": "McCartney" },
              { "firstName": "George", "lastName": "Harrison" },
              { "firstName": "Ringo", "lastName": "Starr" }
            ],
            "name": function () {
                return this.firstName + " " + this.lastName;
            }
        };
        var template = $("#j_template").html();
        var html = Mustache.render(template, objInvokeResult);
        $("#ul_bind").append(html);
    </script>
</body>
</html>
